<template>
  <div class="drap-container">
    <p class="hint">这是 基于 sortablejs 简单展示的可拖拽模板！ 跟多内容可以访问
      <a href="https://github.com/SortableJS/Sortable">sortablejs</a>
    </p>
    <p class="hint">这是可拖拽列表</p>
    <div class="easyDrap">
      <ul class="item items1">
        <li class="item1">item 1</li>
        <li class="item1">item 2</li>
        <li class="item1">item 3</li>
        <li class="item1">item 4</li>
      </ul>
      <ul class="item items2">
        <li class="item2">item 1</li>
        <li class="item2">item 2</li>
        <li class="item2">item 3</li>
        <li class="item2">item 4</li>
      </ul>
    </div>
    <p class="hint">这是可拖拽看板</p>
    <div class="easyDrap kanban">
      <div class="item box">
        <p class="title">Todo</p>
        <ul class="items3">
          <li class="item1">item 1</li>
          <li class="item1">item 2</li>
          <li class="item1">item 3</li>
        </ul>
      </div>
      <div class="item box">
        <p class="title">Working</p>
        <ul class="items4">
          <li class="item1">item 1</li>
          <li class="item1">item 2</li>
          <li class="item1">item 3</li>
          <li class="item1">item 4</li>
          <li class="item1">item 5</li>
        </ul>
      </div>
      <div class="item box">
        <p class="title">Done</p>
        <ul class="items5">
          <li class="item1">item 1</li>
          <li class="item1">item 2</li>
          <li class="item1">item 3</li>
          <li class="item1">item 4</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  data() {
    return {
    }
  },
  mounted() {
    const el1 = document.querySelector('.items1')
    const el2 = document.querySelector('.items2')
    const el3 = document.querySelector('.items3')
    const el4 = document.querySelector('.items4')
    const el5 = document.querySelector('.items5')
    const kanban = document.querySelector('.kanban')
    Sortable.create(el1, {
      group: 'easy',
      animation: 100
    })
    Sortable.create(el2, {
      group: 'easy',
      animation: 100
    })
    Sortable.create(el3, {
      group: 'normal',
      animation: 100
    })
    Sortable.create(el4, {
      group: 'normal',
      animation: 100
    })
    Sortable.create(el5, {
      group: 'normal',
      animation: 100
    })
    Sortable.create(kanban)
  }
}
</script>

<style lang="less" scoped>
  .drap-container {
    user-select: none;
  }
  .hint {
    margin: 10px 0;
    width: 100%;
    background-color: #eee;
    padding: 5px 4px;
  }
  .easyDrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .item {
    width: 30%;
  }
  .items1 {
    margin: 0 40px;
  }
  .item1, .item2 {
    margin: 10px 0;
    padding: 0 5px;
    height: 40px;
    background-color: #00C48D;
    border: 1px solid #aaa;
    line-height: 40px;
    border-radius: 2px;
  }
  .items2{
    margin: 0;
  }
  .item2 {
    background-color: #fff;
  }
  .box {
    background-color: orange;
    margin: 0 20px;
    padding: 20px;
    border: 5px outset #ccc;
    ul {
      background-color: #aaffff;
      padding: 5px;
    }
  }
  .title {
    padding-bottom: 5px;
    color: #fff;
    border-bottom: 1px solid #eee;
    text-align: center;
  }
</style>
